<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件下载</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            border: none;
            outline: none;
        }

        body {
            overflow: hidden;
            background-color: rgb(236, 236, 236);
        }

        .wrapper, .tod-wrapper {
            /*margin: 15% auto;*/
            display: flex;
            align-items: center;
            flex-flow: column;
            height: 100px;
        }

        .list-name {
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            height: 20px;
            width: 404px;
            font-family: "华文宋体", serif;
            font-weight: bold;
        }

        .list-name:first-child {
            margin-top: 5%;
        }

        .downloadForm {
            height: 100%;
            display: flex;
            flex-flow: column;
            justify-content: space-evenly;
        }

        .buttonWrapper {
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }

        .downloadFileButton, .pauseFileButton, .cancelFileButton {
            width: 85px;
            height: 35px;
            font-size: 13px;
            border-radius: 5px;
            margin-right: 10px;
            font-weight: bold;
            font-family: "华文宋体", serif;
        }


        .downloadFileButton {
            background-color: rgb(255, 223, 5);
        }

        .pauseFileButton {
            background-color: rgb(214, 90, 255);
        }

        .cancelFileButton {
            background-color: rgb(126, 125, 201);
        }


        .pauseFileButton {
            margin-right: 0px;
        }

        .filenameTip {
            position: absolute;
            display: none;
            font-size: 12px;
            border-radius: 2px;
            background-color: rgba(216, 234, 92, .9);
            padding: 0 5px;
            color: black;
        }

        .downloadFileButton:hover, .pauseFileButton:hover, .cancelFileButton:hover {
            cursor: pointer;
        }

        .outer {
            width: 400px;
            height: 30px;
            border-radius: 10px;
            border: 2px solid rgb(50, 148, 248);
            overflow: hidden;
        }

        .inner {
            height: 100%;
            text-align: center;
            line-height: 30px;
            background-color: #96ef16;
            transition: 0.1s width;
            width: 0;
            color: #0000ff;
        }

        .message {
            position: fixed;
            font-size: 18px;
            left: 50%;
            transform: translateX(-50%);
            top: 5%;
            display: none;
        }

        .recordFileId {
            display: none;
        }


    </style>
</head>
<body>
<div class="list-name">
    文件下载：
</div>
<div class="wrapper">
    <form class="downloadForm" action="/download/downloadFile" method="post">
        <div class="outer">
            <div class="inner"></div>
        </div>
        <div class="buttonWrapper">
            <button class="downloadFileButton" type="button">下载</button>
            <button class="cancelFileButton " type="button">取消</button>
            <button class="pauseFileButton " type="button" clickCount="1">暂停</button>
            <input class="recordFileId" value="" type="text" name="id"/>
        </div>
    </form>
    <div class="filenameTip">当前未选择任何文件</div>
</div>
<div class="list-name">
    未完成列表：
</div>
<div class="wrapper tod-wrapper">
    <form class="downloadForm" action="/download/downloadFile" method="post">
        <div class="outer">
            <div class="inner"></div>
        </div>
        <div class="buttonWrapper">
            <button class="cancelFileButton " type="button">取消</button>
            <button class="pauseFileButton " type="button" clickCount="1">暂停</button>
            <input class="recordFileId" value="" type="text" name="id"/>
        </div>
    </form>
    <div class="filenameTip">当前未选择任何文件</div>
</div>
<div class="message">失败失败失败失败</div>
<script>
    let selectFileButton = $(".selectFileButton");
    let downloadFileButton = $(".downloadFileButton");
    let filenameTip = $(".filenameTip");
    let inner = $(".inner");
    let message = $(".message");
    let pauseFileButton = $(".pauseFileButton");
    let recordFileId = $(".recordFileId");
    let downloadForm = $(".downloadForm");

    //显示提示信息
    function showMessage(result) {
        let color = result.flag ? "green" : "red";
        message.css("color", color);
        message.text(result.message);
        message.fadeIn(1000);
        message.fadeOut(1000);
    }

    //页面加载完毕
    $(function () {
        //下载文件
        downloadFileButton.click(function () {
            //获取提交文本
            let downloadForm = $(this).parent().parent();
            //获取记录文本
            let recordFileId = $(this).parent().children(".recordFileId");
            //获取进度条
            let inner = $(this).parent().parent().children(".outer").children(".inner");
            //获取是否暂停
            let isPause;
            //获取文件id
            $.ajax({
                url: '/download/getDownloadId',
                type: 'GET',
                async: false,//同步
                success: function (result) {
                    //设置id参数
                    recordFileId.val(result.data.id);
                    recordFileId.attr("id", result.data.id);
                    //发送下载文件请求
                    downloadForm.submit();
                    //定时获取进度
                    interval = setInterval(function () {
                        isPause = $(this).parent().children(".pauseFileButton").attr("isPause");
                        if (isPause) {
                            clearInterval(interval);
                        }
                        //获取进度
                        $.ajax({
                            url: "/download/getPercent",
                            type: 'GET',
                            data: {id: recordFileId.val()},
                            success: function (result) {
                                let newWidth = result.data + "%";
                                inner.css("width", newWidth);
                                inner.text(newWidth);
                                if (result.data >= 100) {
                                    clearInterval(interval);
                                    let r = {flag: true, message: "上传成功！"};
                                    showMessage(r)
                                }
                            },
                            error: function () {
                                clearInterval(interval);
                                showMessage({flag: false, message: "请求错误!请重试！"});
                            }
                        })

                    }, 500);
                },
                error: function () {
                    showMessage({flag: false, message: "获取id失败！"})
                }
            });
        });
        //暂停下载
        pauseFileButton.click(function () {
            //获取id
            let id = $(this).parent().children(".recordFileId").val();
            let clickCount = parseInt($(this).attr("clickCount"));
            $(this).attr("clickCount", clickCount + 1);
            if (clickCount % 2) {
                $.ajax({
                    url: '/download/pauseDownload',
                    type: 'GET',
                    data: {id: id},
                    success: function (result) {
                        showMessage(result);
                        $(this).attr("isPause", true);
                    },
                    error: function () {
                        showMessage({flag: false, message: "暂停失败！"})
                    }
                });
            } else {
                $.ajax({
                    url: '/download/continueDownload',
                    type: 'GET',
                    data: {id: id},
                    success: function (result) {
                        showMessage(result);
                        $(this).attr("isPause", false);
                    },
                    error: function () {
                        showMessage({flag: false, message: "暂停失败！"})
                    }
                });

            }

        });
    })
</script>
</body>
</html>